<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  <div class="main">
    <img src="./images/bac-circle.png" alt="" class="circle">
    <div class="header">
      <div class="nav">
        <div class="img">
          <img src="./images/logo.png" alt="">
        </div>
        <div class="list">
          <ul class="nav-list">
            <li><a href="#"><img src="./images/home-page.png" alt=""><span class="text">首页</span></a></li>
            <li><a href="#"><img src="./images/servies-center.png" alt=""><span class="text">服务中心</span></a></li>
            <li><a href="#"><img src="./images/person-center.png" alt=""><span class="text">个人中心</span></a></li>
          </ul>
        </div>
        <div class="search"><input type="text" placeholder="搜索" class="input"><img src="./images/search.png" alt="" class="search-logo"></div>
        <div class="login"><a href="#"><img src="./images/login.png" alt=""><span class="text">登录</span></a></div>
      </div>
    </div>
    <div class="swiper">
      <div class="banner">
          <div class="title">
            <span>江苏省常州技师学院</span><br>
            <span><img src="./images/line.png" alt="">智慧校园<img src="./images/line.png" alt=""></span><br>
            <span>&nbsp&nbsp&nbsp&nbsp&nbsp网上办事大厅</span>
            <a href="#"><div class="btn">下载APP</div></a>
          </div>
          <div class="banner-pic">
            <img src="./images/computer.png" alt="" class="computer">
            <img src="./images/phone.png" alt="" class="phone">
          </div> 
      </div>
    </div>
    <div class="tabbar">
      <div class="tab-content">
        <img src="./images/teacher.png" alt=""><span class="text-tab teacher">我是老师</span>
        <img src="./images/student.png" alt="" class="tab-stu"><span class="text-tab student">我是学生</span>
      </div>
    </div>
    <div class="hot-server">
      <p class="server-title">热门服务</p>
      <div class="server-content">
        <div class="server-item">
          <div class="item-img">
            <img src="./images/0-1.png" alt="">
          </div> 
          <div class="item-box">
            <span class="item-box-text ">后勤报修处理</span>
            <img src="./images/star.png" alt="" class="item-box-img">           
          </div>
        </div>
        <div class="server-item">
          <div class="item-img">
            <img src="./images/0-2.png" alt="">
          </div> 
          <div class="item-box">
            <span class="item-box-text ">后勤报修处理</span>
            <img src="./images/star.png" alt="" class="item-box-img">           
          </div>
        </div>
        <div class="server-item">
          <div class="item-img">
            <img src="./images/0-3.png" alt="">
          </div> 
          <div class="item-box">
            <span class="item-box-text ">后勤报修处理</span>
            <img src="./images/star.png" alt="" class="item-box-img">           
          </div>
        </div>
        <div class="server-item">
          <div class="item-img">
            <img src="./images/0-4.png" alt="">
          </div> 
          <div class="item-box">
            <span class="item-box-text ">后勤报修处理</span>
            <img src="./images/star.png" alt="" class="item-box-img">           
          </div>
        </div>
        <div class="server-item">
          <div class="item-img">
            <img src="./images/0-5.png" alt="">
          </div> 
          <div class="item-box">
            <span class="item-box-text ">后勤报修处理</span>
            <img src="./images/star.png" alt="" class="item-box-img">           
          </div>
        </div>
      </div>
      <a href="javascript:void(0)" class="btn-server prev" id="prev"><img src="./images/arror_left.png" alt=""></a>
      <a href="javascript:void(0)" class="btn-server next" id="next"><img src="./images/arror-right.png" alt=""></a>
    </div>
    <div class="server-class">
      <p class="server-title">服务分类</p>
    </div>
    <div class="admin-server">
      <div class="admin-left" style="background: url(../images/1-0-bac.png) no-repeat;">
        <p class="common-title">行政服务</p>
        <img src="./images/1-0.png" alt="">
        <div class="common-btn">查看更多</div>
      </div>
      <div class="admin-right">
        <div class="admin-item"><img src="./images/1-1.png" alt=""><div class="admin-text">财务经费报销</div></div>
        <div class="admin-item"><img src="./images/1-2.png" alt=""><div class="admin-text">财务差旅费报销</div></div>
        <div class="admin-item"><img src="./images/1-3.png" alt=""><div class="admin-text">中层干部请假</div></div>
        <div class="admin-item"><img src="./images/1-4.png" alt=""><div class="admin-text">教职工出差申请</div></div>
        <div class="admin-item"><img src="./images/1-5.png" alt=""><div class="admin-text">预算管理</div></div>
        <div class="admin-item"><img src="./images/1-6.png" alt=""><div class="admin-text">学院院章使用申请</div></div>
        <div class="admin-item"><img src="./images/1-7.png" alt=""><div class="admin-text">财务报销自由流</div></div>
        <div class="admin-item"><img src="./images/1-8.png" alt=""><div class="admin-text">学院发文流程</div></div>
      </div>
    </div>
    <hr class="common line-1">
    <div class="admin-server">
      <div class="admin-left" style="background: url(../images/2-0-bac.png) no-repeat;">
        <p class="common-title">行政服务</p>
        <img src="./images/2-0.png" alt="">
        <div class="common-btn">查看更多</div>
      </div>
      <div class="admin-right">
        <div class="admin-item"><img src="./images/2-1.png" alt=""><div class="admin-text">财务经费报销</div></div>
        <div class="admin-item"><img src="./images/2-2.png" alt=""><div class="admin-text">财务差旅费报销</div></div>
        <div class="admin-item"><img src="./images/2-3.png" alt=""><div class="admin-text">中层干部请假</div></div>
        <div class="admin-item"><img src="./images/2-4.png" alt=""><div class="admin-text">教职工出差申请</div></div>
        <div class="admin-item"><img src="./images/2-5.png" alt=""><div class="admin-text">预算管理</div></div>
        <div class="admin-item"><img src="./images/2-6.png" alt=""><div class="admin-text">学院院章使用申请</div></div>
        <div class="admin-item"><img src="./images/2-7.png" alt=""><div class="admin-text">财务报销自由流</div></div>
        <div class="admin-item"><img src="./images/2-8.png" alt=""><div class="admin-text">财务报销自由流</div></div>
      </div>
    </div>
    <hr class="common line-2">
    <div class="admin-server">
      <div class="admin-left" style="background: url(../images/3-0-bac.png) no-repeat;">
        <p class="common-title">行政服务</p>
        <img src="./images/3-0.png" alt="">
        <div class="common-btn">查看更多</div>
      </div>
      <div class="admin-right">
        <div class="admin-item"><img src="./images/3-1.png" alt=""><div class="admin-text">财务经费报销</div></div>
        <div class="admin-item"><img src="./images/3-2.png" alt=""><div class="admin-text">财务差旅费报销</div></div>
        <div class="admin-item"><img src="./images/3-3.png" alt=""><div class="admin-text">中层干部请假</div></div>
        <div class="admin-item"><img src="./images/3-4.png" alt=""><div class="admin-text">教职工出差申请</div></div>
        <div class="admin-item"><img src="./images/3-5.png" alt=""><div class="admin-text">预算管理</div></div>
        <div class="admin-item"><img src="./images/3-6.png" alt=""><div class="admin-text">学院院章使用申请</div></div>
        <div class="admin-item"><img src="./images/3-7.png" alt=""><div class="admin-text">财务报销自由流</div></div>
      </div>
    </div>
    <hr class="common line-3">
    <div class="admin-server">
      <div class="admin-left" style="background: url(../images/4-0-bac.png) no-repeat;">
        <p class="common-title">行政服务</p>
        <img src="./images/4-0.png" alt="">
        <div class="common-btn">查看更多</div>
      </div>
      <div class="admin-right">
        <div class="admin-item"><img src="./images/4-1.png" alt=""><div class="admin-text">财务经费报销</div></div>
        <div class="admin-item"><img src="./images/4-2.png" alt=""><div class="admin-text">财务差旅费报销</div></div>
        <div class="admin-item"><img src="./images/4-3.png" alt=""><div class="admin-text">中层干部请假</div></div>
        <div class="admin-item"><img src="./images/4-4.png" alt=""><div class="admin-text">教职工出差申请</div></div>
        <div class="admin-item"><img src="./images/4-5.png" alt=""><div class="admin-text">预算管理</div></div>
        <div class="admin-item"><img src="./images/4-6.png" alt=""><div class="admin-text">学院院章使用申请</div></div>
      </div>
    </div>
    <hr class="common line-4">
    <div class="admin-server">
      <div class="admin-left" style="background: url(../images/5-0-bac.png) no-repeat;">
        <p class="common-title">行政服务</p>
        <img src="./images/5-0.png" alt="">
        <div class="common-btn">查看更多</div>
      </div>
      <div class="admin-right">
        <div class="admin-item"><img src="./images/5-1.png" alt=""><div class="admin-text">财务经费报销</div></div>
        <div class="admin-item"><img src="./images/5-2.png" alt=""><div class="admin-text">财务差旅费报销</div></div>
        <div class="admin-item"><img src="./images/5-3.png" alt=""><div class="admin-text">中层干部请假</div></div>
        <div class="admin-item"><img src="./images/5-4.png" alt=""><div class="admin-text">教职工出差申请</div></div>
        <div class="admin-item"><img src="./images/5-5.png" alt=""><div class="admin-text">预算管理</div></div>
        <div class="admin-item"><img src="./images/5-6.png" alt=""><div class="admin-text">学院院章使用申请</div></div>
        <div class="admin-item"><img src="./images/5-7.png" alt=""><div class="admin-text">财务报销自由流</div></div>
        <div class="admin-item"><img src="./images/5-8.png" alt=""><div class="admin-text">财务报销自由流</div></div>
      </div>
    </div>
    <hr class="common line-5">
    <div class="admin-server">
      <div class="admin-left" style="background: url(../images/6-0-bac.png) no-repeat;">
        <p class="common-title">行政服务</p>
        <img src="./images/6-0.png" alt="">
        <div class="common-btn">查看更多</div>
      </div>
      <div class="admin-right">
        <div class="admin-item"><img src="./images/6-1.png" alt=""><div class="admin-text">财务经费报销</div></div>
        <div class="admin-item"><img src="./images/6-2.png" alt=""><div class="admin-text">财务差旅费报销</div></div>
        <div class="admin-item"><img src="./images/6-3.png" alt=""><div class="admin-text">中层干部请假</div></div>
        <div class="admin-item"><img src="./images/6-4.png" alt=""><div class="admin-text">教职工出差申请</div></div>
        <div class="admin-item"><img src="./images/6-5.png" alt=""><div class="admin-text">预算管理</div></div>
        <div class="admin-item"><img src="./images/6-6.png" alt=""><div class="admin-text">学院院章使用申请</div></div>
        <div class="admin-item"><img src="./images/6-7.png" alt=""><div class="admin-text">财务报销自由流</div></div>
        <div class="admin-item"><img src="./images/6-8.png" alt=""><div class="admin-text">财务报销自由流</div></div>
      </div>
    </div>
    <hr class="common line-6">
    <div class="admin-server">
      <div class="admin-left" style="background: url(../images/7-0-bac.png) no-repeat;">
        <p class="common-title">行政服务</p>
        <img src="./images/7-0.png" alt="">
        <div class="common-btn">查看更多</div>
      </div>
      <div class="admin-right">
        <div class="admin-item"><img src="./images/7-1.png" alt=""><div class="admin-text">财务经费报销</div></div>
        <div class="admin-item"><img src="./images/7-2.png" alt=""><div class="admin-text">财务差旅费报销</div></div>
        <div class="admin-item"><img src="./images/7-3.png" alt=""><div class="admin-text">中层干部请假</div></div>
        <div class="admin-item"><img src="./images/7-4.png" alt=""><div class="admin-text">教职工出差申请</div></div>
        <div class="admin-item"><img src="./images/7-5.png" alt=""><div class="admin-text">预算管理</div></div>
        <div class="admin-item"><img src="./images/7-6.png" alt=""><div class="admin-text">学院院章使用申请</div></div>
        <div class="admin-item"><img src="./images/7-7.png" alt=""><div class="admin-text">财务报销自由流</div></div>
        <div class="admin-item"><img src="./images/7-8.png" alt=""><div class="admin-text">财务报销自由流</div></div>
      </div>
    </div>
    <hr class="common line-7">
    <div class="admin-server">
      <div class="admin-left" style="background: url(../images/8-0-bac.png) no-repeat;">
        <p class="common-title">行政服务</p>
        <img src="./images/8-0.png" alt="">
        <div class="common-btn">查看更多</div>
      </div>
      <div class="admin-right">
        <div class="admin-item"><img src="./images/8-1.png" alt=""><div class="admin-text">财务经费报销</div></div>
        <div class="admin-item"><img src="./images/8-2.png" alt=""><div class="admin-text">财务差旅费报销</div></div>
        <div class="admin-item"><img src="./images/8-3.png" alt=""><div class="admin-text">中层干部请假</div></div>
        <div class="admin-item"><img src="./images/8-4.png" alt=""><div class="admin-text">教职工出差申请</div></div>
        <div class="admin-item"><img src="./images/8-5.png" alt=""><div class="admin-text">预算管理</div></div>
        <div class="admin-item"><img src="./images/8-6.png" alt=""><div class="admin-text">学院院章使用申请</div></div>
        <div class="admin-item"><img src="./images/8-7.png" alt=""><div class="admin-text">财务报销自由流</div></div>
        <div class="admin-item"><img src="./images/8-8.png" alt=""><div class="admin-text">财务报销自由流</div></div>
      </div>
    </div>
    <hr class="common line-8">
  </div>
  <div class="bac"></div>
  <script src="./js/index.js"></script>
</body>
</html>